<!--车辆维修页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding: 10px 20px;">
    <span style="font-size: 20px;line-height: 60px;">用户管理</span>
    <el-button @click="dialogVisible=true" type="primary" style="float: right;margin-top: 10px;">新建用户</el-button>
  </div>
  <!-- 新建/编辑用户弹窗 -->
  <!-- :before-close="" 表示在在关闭之前执行的操作 如调用方法等 避免点击窗口外部引发的弹窗关闭造成的数据丢失 -->
  <el-dialog :before-close="handleClose" :title="dialogTitle" v-model="dialogVisible"
             style="width: 1000px;padding: 40px;" :disabled="saveUserForm.id!=null">
    <el-form label-position="top" label-width="80px">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="saveUserForm.username"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="saveUserForm.phone"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!--第二行-->
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input placeholder="请输入邮箱" v-model="saveUserForm.email"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄">
            <el-input placeholder="请输入年龄" v-model="saveUserForm.age"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!--第三行-->
      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item label="职级">
            <el-select placeholder="请选择" v-model="saveUserForm.level" @change="loadLeader">
              <!--<el-option label="职员" value="10"></el-option>-->
              <!--<el-option label="经理" value="20"></el-option>-->
              <!--<el-option label="总监" value="30"></el-option>-->
              <!--<el-option label="总裁" value="40"></el-option>-->
              <el-option v-for="item in levelOptions" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="直属领导">
            <el-select placeholder="请选择" v-model="saveUserForm.parentId">
              <!--<el-option label="shaoyun" value="1"></el-option>-->
              <!--<el-option label="mike" value="2"></el-option>-->
              <el-option v-for="item in leaderOptions" :label="item.username" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="性别">
            <el-radio-group v-model="saveUserForm.gender">
              <el-radio label="男" value="1" border style="margin: 0;"></el-radio>
              <el-radio label="女" value="0" border></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户状态">
            <el-radio-group v-model="saveUserForm.status">
              <el-radio label="启用" value="1" border style="margin: 0;"></el-radio>
              <el-radio label="禁用" value="0" border></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveUser">保存</el-button>
    </template>
  </el-dialog>
  <!-- 用户查询卡片 -->
  <!-- :inline="true" 表单标签的属性 属性值为 "true" 表示控制当前表单中的所有表单项横置 -->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="用户搜索">
        <el-input placeholder="请输入用户名" style="width: 220px;" v-model="searchUserForm.username"
                  @keydown.enter="loadUser"/>
      </el-form-item>
      <el-form-item label="用户状态">
        <el-select placeholder="请输入用户状态" style="width: 290px;" v-model="searchUserForm.status"
                   @change="loadUser">
          <el-option label="启用" value="1"/>
          <el-option label="禁用" value="0"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch()">重置</el-button>
        <el-button type="primary" @click="loadUser()">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 用户信息表格 -->
  <el-card style="margin: 20px;">
    <el-table :data="userArr">
      <el-table-column type="index" label="编号" width="80px" align="center"></el-table-column>
      <el-table-column prop="username" label="用户名" align="center"></el-table-column>
      <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
      <el-table-column prop="createTime" label="加入时间" align="center"></el-table-column>
      <el-table-column prop="status" label="用户状态" align="center">
        <template #default="scope">
          <el-switch active-value="1" inactive-value="0" v-model="scope.row.status"
                     :disabled="scope.row.level==40" @change="changeStatus(scope.row.id,scope.row.status)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" link :disabled="scope.row.level==40"
                     @click="resetPassword(scope.row.id)">密码重置
          </el-button>
          <el-button type="primary" size="small" link :disabled="scope.row.level==40" @click="editUser(scope.row.id)">
            编辑
          </el-button>
          <el-button type="primary" size="small" link :disabled="scope.row.level==40" @click="deleteUser(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

// 定义变量用来控制新增用户弹窗是否出现
const dialogVisible = ref(false);
// 定义变量保存弹窗标题
const dialogTitle = ref('新建用户');
// 定义数组保存员工职级 选项: Options
const levelOptions = ref([
  {label: '职员', value: '10'},
  {label: '经理', value: '20'},
  {label: '总监', value: '30'},
  {label: '总裁', value: '40'}
]);
// 定义数组保存直属领导数据
const leaderOptions = ref([
  {username: 'shaoyun', id: '1'},
  {username: 'mike', id: '2'},
]);
// 定义方法 获取直属领导数据(职级+10)
const loadLeader = () => {
  // 优化项 若已经勾选了直属领导 重新进行职位选择时 需要将原直属领导数组及已选择的直属领导数据清空
  leaderOptions.value = [];
  saveUserForm.value.parentId = '';
  // 获取当前选择的对应职级的值 若要使用直接+10的方式寻找对应上级 应注意返回的数据为字符串 需要转为Number类型才能正常运算
  let level = parseInt(saveUserForm.value.level) + 10;
  // 向后端发送请求查询数据
  axios.get(BASE_URL + '/v1/user/select?level=' + level).then((response) => {
    if (response.data.code == 2000) {
      leaderOptions.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  });
};
// 定义对象收集新增/修改员工弹窗的表单信息
const saveUserForm = ref({
  username: '',
  phone: '',
  email: '',
  age: '',
  level: '',
  parentId: '',
  gender: '',
  status: ''
});
// 定义保存用户的方法
const saveUser = () => {
  // 若向后端发送请求的参数是一个JS字符串对象 前端可以使用qs将参数对象转为查询字符串的格式发送
  // 格式:username=tom&phone=18811112222&email=tom@qq.com&age=12&level=20&parentId=1&gender=1&status=1
  // 即直接在前端将数据格式处理好 后端`Controller类`无需考虑前端传回的数据是否为对象 因此无需添加@RequestBody注解
  let data = qs.stringify(saveUserForm.value);
  console.log(data);
  axios.post(BASE_URL + '/v1/user/save', data)
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success('保存成功!');
          // 保存成功后关闭弹窗
          dialogVisible.value = false;
          // 清空已保存好的表单数据 否则再次打开弹窗 上一次的操做记录及数据会被保存
          saveUserForm.value = {};
          // 新增/更新用户后还需要加载用户数据 TODO: 注释 表示待办事项
          loadUser();
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}
// 处理弹窗关闭的方法 关闭弹窗之前的操作
const handleClose = () => {
  if (confirm('是否关闭弹窗?')) {
    // 用户确认关闭弹窗后 关闭弹窗
    dialogVisible.value = false;
    // (关闭弹窗 清空数据)清空已输入的表单数据
    saveUserForm.value = {};
  }
}
// 定义数组用于保存用户列表数据
const userArr = ref([
  {username: '123', phone: '123123', createTime: '2022-01-01', status: '1'},
  {username: '321', phone: '321321', createTime: '2022-10-10', status: '0'}
]);
// 定义对象 用于保存查询条件
const searchUserForm = ref({username: '', status: ''});
// 定义方法 用于加载用户列表数据
const loadUser = () => {
  let data = qs.stringify(searchUserForm.value);
  console.log(data);
  // 若请求中包含查询条件 则根据条件进行筛选查询 若无查询条件 则默认查询所有用户信息
  axios.get(BASE_URL + '/v1/user/select?' + data).then((response) => {
    // 若后端返回的状态码为2000 表示查询到了相应数据
    if (response.data.code == 2000) {
      // 把请求成功后后端返回的数据装载到与表格绑定的数组中
      userArr.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  });
};
// onMounted() - 生命周期方法: 页面加载完毕立即调用的方法
onMounted(() => {
  // 页面加载时 立即使用此方法加载用户列表数据
  loadUser();
});
// 重置搜索框内容
const resetSearch = () => {
  // 清空之前输入的搜索内容
  searchUserForm.value = {};
  // 重新加载所有的用户数据
  loadUser();
};
// 重置密码按钮 restful代码风格: '.../'+参数 即以"/"代替"?"进行参数的拼接
const resetPassword = (userId) => {
  axios.post(BASE_URL + '/v1/user/update/password/' + userId).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success('密码重置成功!');
    } else {
      ElMessage.error(response.data.msg);
    }
  })
};
// 编辑用户功能
const editUser = (id) => {
  // 打开弹窗并修改弹窗标题
  dialogVisible.value = true;
  dialogTitle.value = '编辑用户';
  axios.get(BASE_URL + '/v1/user/select?id=' + id).then((response) => {
    if (response.data.code == 2000) {
      // 注意 后端返回的数据类型为集合形式 - List<UserVO> - 因此需要获取对应索引值的元素的数据 此处为第一个元素 因此索引为0
      saveUserForm.value = response.data.data[0];
      // 获取可选直属领导数据 防止出现直属领导不显示姓名而显示编号的错误出现
      let level = parseInt(saveUserForm.value.level) + 10;
      axios.get(BASE_URL + '/v1/user/select?level=' + level).then((response) => {
        if (response.data.code == 2000) {
          leaderOptions.value = response.data.data;
        } else {
          ElMessage.error(response.data.msg);
        }
      });
    } else {
      ElMessage.error(response.data.msg);
    }
  });
};
// 修改用户状态
const changeStatus = (userId, status) => {
  axios.post(BASE_URL + '/v1/user/update/status/' + userId + '/' + status).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success('状态修改成功!');
    } else {
      ElMessage.error(response.data.msg);
      // 若未修改成功 需要将页面当前用户的状态重置为修改前的状态 即重新刷新页面加载用户数据即可
      loadUser();
    }
  })
}
// 删除用户
const deleteUser = (userId) => {
  if (confirm('是否删除?')) {
    axios.delete(BASE_URL + '/v1/user/delete/' + userId).then((response) => {
      if (response.data.code == 2000) {
        ElMessage.success('删除用户成功!');
        // 删除成功后 重新加载用户信息 刷新页面
        loadUser();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
};
</script>

<style scoped>

</style>